<template>
	<view class="container">
		<u-navbar title="收货地址" :autoBack="true" placeholder="true"></u-navbar>
		<view class="content">
			<view class="address-item" v-if="show" v-for="(item, index) in dataList" :key="index">
				<image :src="imgBaseUrl+'/ache/images/position.png'"class="img"></image>
				<view class="address" @click="onChange(item)">
					<view class="address-user">
						<view class="address-name">张小斐</view>
						<view class="address-phone">15098654233</view>
					</view>
					<view class="address-city">济南市槐荫区兴福寺路街道 中泽大厦19 楼 龙池技术中心</view>
				</view>
				<view class="address-edit">
					<view class="trash" @click="ontrash"><u-icon name="trash" color="#888888" size="35"></u-icon></view>
					<view class="edit"><u-icon name="edit-pen" color="#fa3534" size="35" @click="onedit"></u-icon></view>
				</view>
			</view>

			<view class="erritem" v-else>
				<image :src="imgBaseUrl+'/ache/images/position.png'" class="img"></image>
				<view class="errtitle">暂无收货地址</view>
			</view>
		</view>
		<u-modal v-model="showpopup" :content="content" :show-title='false' show-cancel-button='false'	 @confirm="confirm"  @cancel="cancel" ></u-modal>
		<button class="btn" type="default" @click="onAddress">添加地址</button>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			type: '', //进入该页面的类型
			dataList: [
				{ receiverName: '张小斐', phone: '15098654233', address: '菏泽市牡丹区东方红大街 1654号王府记 糕点房' },
				{ receiverName: '张小斐', phone: '15098654233', address: '菏泽市牡丹区东方红大街 1654号王府记 糕点房' },
				{ receiverName: '张小斐', phone: '15098654233', address: '菏泽市牡丹区东方红大街 1654号王府记 糕点房' },
				{ receiverName: '张小斐', phone: '15098654233', address: '菏泽市牡丹区东方红大街 1654号王府记 糕点房' },
				{ receiverName: '张小斐', phone: '15098654233', address: '菏泽市牡丹区东方红大街 1654号王府记 糕点房' }
			],
			show: true, //是否有地址
			showpopup: false ,//是否删除弹窗提示
			content:''//弹窗的提示文案
		};
	},

	computed: {
		...mapGetters(['imgBaseUrl'])
	},

	onLoad(options) {},

	methods: {
		onChange(item) {
			uni.navigateBack({});
			console.log(item, '切换这个地址');
		},
		// 添加收货地址
		onAddress() {
			uni.navigateTo({
				url: '/pages/address-edit/index'
			});
			console.log('添加地址');
		},
		// 删除地址
		ontrash() {
			this.showpopup = true;
			
			this.content='您确定要删除地址么？'
			console.log('删除地址');
		},
		//修改地址的时候点击了确定
		confirm(){
			console.log('点击了确定')
		},
		//弹窗点击了取消
		cancel(){
			console.log('点击了取消')
		},
		// 设置地址
		onedit() {
			
			console.log('设置地址');
		}
	}
};
</script>

<style lang="scss">
@import '@/styles/mixin.scss';
.container {
	min-height: 100%;
	background-color: #f5f5f5;
	padding-bottom: 130rpx;
	.content {
		width: 100%;
		.address-item {
			padding: 20rpx;
			margin-top: 20rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
			.img {
				padding-top: 20rpx;
				width: 51rpx;
				height: 51rpx;
			}
			.address {
				width: 450rpx;
				padding-left: 20rpx;
				.address-user {
					display: flex;
					.address-name {
						font-size: 28rpx;
						font-weight: bold;
						color: #222222;
					}
					.address-phone {
						padding-left: 50rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #222222;
					}
				}
				.address-city {
					padding-top: 10rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #888888;
				}
			}
			.address-edit {
				display: flex;
				padding: 30rpx;
				.edit {
					padding-left: 40rpx;
				}
			}
		}
		.erritem {
			width: 100%;
			margin-top: 50%;
			text-align: center;
			.img {
				width: 51rpx;
				height: 51rpx;
			}
			.errtitle {
				padding: 20rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #888888;
			}
		}
	}
	.btn {
		position: fixed;
		left: 50%;
		bottom: 20rpx;
		width: 90%;
		transform: translateX(-50%);
		border-radius: 60rpx;
		padding: 6rpx;
		color: #ffffff;
		background-color: #ed3f14;
	}
}
</style>
